<template>
  <div class="content">
    <div v-if="$router.currentRoute.value.meta.show" style="margin-bottom: 2px;">
      <NavBar></NavBar>
    </div>
    <div style="position: relative">
      <router-view></router-view>
    </div>
    <div style="margin-top: 10px" v-if="$router.currentRoute.value.meta.show">
      <Page_footer></Page_footer>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/commit/NavBar.vue'
import Page_footer from '@/components/commit/Footer_page.vue'

export default {
  name: 'App',
  components: {
    NavBar,Page_footer
  },
  setup(){
      const debounce = (callback, delay) => {
        let tid;
        return function (...args) {
          const ctx = self;
          tid && clearTimeout(tid);
          tid = setTimeout(() => {
            callback.apply(ctx, args);
          }, delay);
        };
      };
      const _ = window.ResizeObserver;
      window.ResizeObserver = class ResizeObserver extends _ {
        constructor(callback) {
          callback = debounce(callback, 20);
          super(callback);
        }
      };
  }
}
</script>

<style>
.content{
  width: 1500px;
  margin: auto;
}
</style>
